<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
        <span style="margin-right:5px;" @click="$emit('clearSearchHistory')">全部删除</span>
        <span @click="isDeleteShow = false">全部完成</span>
      </div>
      <van-icon v-else name="delete" @click="isDeleteShow = true"></van-icon>
    </van-cell>
    <van-cell :title="item" v-for="(item, index) in searchHistory" :key="index" @click="onSearchItem(item,index)">
      <van-icon name="close" v-show="isDeleteShow"></van-icon>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    searchHistory: {
      type: Array,
    },
  },
  data() {
    return {
      isDeleteShow: false,
    };
  },
  methods:{
    onSearchItem(item,index){
      // console.log(111)
      if(this.isDeleteShow){
        // 如果是删除的情况下直接删除
        this.searchHistory.splice(index,1);
      } else {
        // 如果是不删除的情况下,直接把点击的记录去搜索
        this.$emit('onSearch',item)
      }
    }
  }
};
</script>

<style>
</style>